<style lang="less" >
	@gradient-color: #3788ee;
@bg-color: #f7f8fa;
@title-color:#3a3a3a;
@text-color: #7e7e7e;
@placeholder-color: #7e7e7e;
.login-vue {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: @bg-color;
  .login-container {
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .login-content {
      letter-spacing: 2px;
      background: #FFF;
      padding: 70px 30px 20px;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      box-sizing: border-box;
      >div {
        margin: 30px 0;
        &.login-input {
          position: relative;
          .placeholder {
            position: absolute;
            color: @placeholder-color;
            top: 6px;
            font-size: 16px;
            transition: all .2s;
            left: 0;
            pointer-events: none;
          }
          input {
            font-size: 16px;
            padding: 8px 0;
            height: 40px;
            width: 100%;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #d3d3d3;
            box-shadow: inset 0 0 0 1000px #fff;
            outline: none;
            box-sizing: border-box;
            transition: .3s;
            font-weight: 200;
            &:focus {
              border-bottom-color: @gradient-color;
              box-shadow: inset 0 0 0 1000px #fff;
            }
          }
          input:focus + .placeholder, .placeholder.fixed{
            font-size: 13px;
            top: -16px;
          }
          input:-webkit-autofill + .placeholder {
            font-size: 13px;
            top: -16px;
          }
        }
        &.login-title {
          font-size: 30px;
          color: @title-color;
          line-height: 1;
          margin: -16px 0px 40px;
          font-weight: 200;
        }

      }
      > .buttonDiv {
        margin-top: 20px;
        .h-btn {
          padding: 12px 0;
          font-size: 18px;
          opacity: .8;
          border-radius: 3px;
          background: @gradient-color;
          border-color: @gradient-color;
          &:hover {
            opacity: 1;
            background: @gradient-color;
            border-color: @gradient-color;
          }
        }
      }
    }
  }
}
</style>

<template>
	<div class="login-vue">
		<div class="login-container">
			<Form ref="form" :label-width="150" :rules="rules" :model="login">
			<div class="login-content">
				<div class="login-title">系统检修管理</div>
				<div class="login-name login-input">
					<FormItem :showLabel="false" :validOnChange="true" prop="username">
					<input type="text" name="username" v-model="login.username" autocomplete="off" @onblur.native.capture="checkName"/>
					<span class="placeholder" :class="{fixed: login.username != '' && login.username != null}">用户名</span>
					</FormItem>
				</div>
				<div class="login-password login-input">
					<FormItem :showLabel="false" :validOnChange="true" prop="password">
					<input type="password" name="password" v-model="login.password"  autocomplete="off" />
					<span class="placeholder" :class="{fixed: login.password != '' && login.password != null}">密码</span>
					</FormItem>
				</div>
				<div class="login-phone login-input">
					<FormItem :showLabel="false" :validOnChange="true" prop="phone">
					<input type="text" name="phone" v-model="login.phone"  autocomplete="off" />
					<span class="placeholder" :class="{fixed: login.phone != '' && login.phone != null}">手机号</span>
					</FormItem>
				</div>
				<span class="text-hover float-right" style="margin-bottom: 20px;margin-top: -20px;" v-font="10" @click="toLogin" >已有账号,前往登录</span>
				<div class="buttonDiv">
					<Button block color="primary" size="l" @click="submit">注册</Button>
				</div>
			</div>
			</Form>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				login: {
					username: '',
					password: '',
					phone:''
				},
				rules:{
						required: ['username', 'password','phone'],
						 mobile: ['phone'],
				}

			};
		},
		methods:{
			toLogin(){
				 this.$router.push("/");
			},
			checkName(){
				const that =this;
			},
			submit(){
				const that =this;
				let validResult = this.$refs.form.valid();
				if (validResult.result) {
				let formdata=new FormData();
				formdata.append("userName",this.login.username);
				formdata.append("userPwd",this.$md5(this.login.password));
				formdata.append("userPhone",this.login.phone);
				that.$axios.post('/api'+'/nameRepeat/'+that.login.username).then(function(resp){
					console.log(resp)
					if(resp.data.msg == "success"){
						that.$axios.post('/api'+'/register/',formdata).then(function(resp){
							console.log(resp.data);
								if(resp.data.msg == "success"){
										that.$Message({
										        type:'success',
										        text: `注册成功`
										      });
											  
								 that.$router.push("/");
								}else{
									that.$Message({
									        type:'success',
									        text: `注册失败`
									      });
								}
							});
					 that.$router.push("/");
					}else{
						that.$Message({
						        type:'error',
						        text: `用户名已存在`
						      });
							  that.login.username=''
							  that.login.password=''
							   that.login.phone=''
					}
				});
				}
			}
		},
		mounted() {},
	};
</script>
